// ----------------------------- 获取文章列表数据 ------------------------------
// 声明请求参数
let data = {
  pagenum: 1,  // 页码，默认1
  pagesize: 2,  // 自己约定的，每页显示几条数据
}


// 定义函数，分页获取数据，并渲染到表格中
function renderArticle() {
  $.ajax({
    url: '/my/article/list',
    data: data,
    success: function (res) {
      // console.log(res);
      if (res.status === 0) {
        let str = '';
        res.data.forEach(item => {
          str += `
          <tr>
            <td>${item.title}</td>
            <td>${item.cate_name}</td>
            <td>${item.pub_date}</td>
            <td>${item.state}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs">编辑</button>
              <button type="button" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
            </td>
          </tr>
          `;
        })
        $('tbody').html(str);
        // 等页面刷新渲染完毕，调用函数，创建分页
        showPage(res.total);
      }
    }
  });
}

renderArticle();


// ------------------------------ 分页 -------------------------------
function showPage(t) {
  // 去layui文档中，复制 15~21行
  let laypage = layui.laypage;
  // 执行一个laypage实例
  laypage.render({
    elem: 'page', // 注意，这里的 test1 是 ID，不用加 # 号
    count: t, // 数据总数，从服务端得到
    limit: data.pagesize, // 每页显示几条
    limits: [2, 3, 5, 10, 15],
    curr: data.pagenum, // 当前页
    // prev: '前一个',
    layout: ['limit', 'prev', 'page', 'next', 'count', 'skip'], // 自定义排版
    // 当切换页码的时候，下面的jump函数就会执行
    jump: function (obj, first) {
      // 首次不执行
      if (!first) {
        // do something
        // obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); // 得到每页显示的条数
        data.pagenum = obj.curr;
        data.pagesize = obj.limit; // 每页显示几条
        renderArticle();
      }
    }
  });
}


// ------------------------------ 获取分类（处理下拉框） -------------------------------
$.ajax({
  url: '/my/category/list',
  success: function (res) {
    // console.log(res);
    if (res.status === 0) {
      let str = '';
      res.data.forEach(item => {
        str += `<option value="${item.id}">${item.name}</option>`;
      });
      $('#cate_id').append(str);
      // 动态创建的 下拉框、单项按钮、复选按钮，需要更新渲染
      let form = layui.form;
      // form.render('select', '表单的lay-filter属性的值');
      form.render('select');
    }
  }
});



// ------------------------------ 筛选 -------------------------------
$('#search').on('submit', function (e) {
  e.preventDefault();
  // 获取两个下拉框的值
  let cate_id = $('#cate_id').val();
  let state = $('#state').val();

  // 添加请求参数
  if (cate_id) {
    data.cate_id = cate_id;
  } else {
    delete data.cate_id; // delete用于删除对象的属性
  }

  if (state) {
    data.state = state;
  } else {
    delete data.state;
  }

  // 重置 pagenum ，筛选之后，从第一页开始浏览数据
  data.pagenum = 1;

  // 发送请求，重新获取数据，重新渲染
  renderArticle();
})
